<template>
    <div class="Preson">
        <h2>watch监视【reactive】定义的【对象类型】数据</h2>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.car1 }},{{ person.car.car2 }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一辆</button>
    <button @click="changeC2">修改第二辆</button>
    <button @click="changeCar">修改Car</button>
    </div>
</template>

<script lang="ts" setup>
import {  watch,ref, reactive } from 'vue'

let person = reactive({
    name: '张三',
    age: 20,
    car: {
        car1: '宝马',
        car2:'奥迪'
    }
})

function changeName() {
    person.name += '~'
}
function changeAge() {
    person.age += 1
}
function changeC1() {
    person.car.car1 = '奇瑞'
}
function changeC2() {
    person.car.car2 = '长安'
}
function changeCar() {
   person.car={car1:'红旗',car2:'大众'}
}

//  监视，情况四: 监视响应式对象中的某个属性,且该属性是基本类型,要写成函数式
// watch(()=>person.name,(newValue,oldValue) => {
//     console.log('preson变化了',newValue,oldValue);
// })

//监视，情况四:监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
// watch(() => person.car, (newValue,oldValue) => {
//     console.log('car变化了',newValue,oldValue);
// },{deep:true})

//监视，情况五:监视上述多个数据
watch([()=>person.name,()=>person.car], (newValue,oldValue) => {
    console.log('person变化了',newValue,oldValue);
},{deep:true})
</script>

<style scoped>
.Preson {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button { 
    margin: 0 10px;
}
</style>